<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
    header{
        margin:100px auto;
    }
    #div1 input {
        background: #CCC;
    }

    #div1 .active {
        background: #fff;
        color: #000;
    }

    #div1 div {
        width: 200px;
        height: 200px;
        background: #000;
        color: #fff;
        display: none;
        text-align: center;
    }
</style>
<body>
<header>
<div id="div1">
    <input class="active" type="button" value="教育"/>
    <input type="button" value="财经"/>
    <input type="button" value="市场走势"/>
    <div style="display:block;">积云教育</div>
    <div>积云财经</div>
    <div>积云菜市场</div>
</div>
</header>
<script>
    /*构造函数模式
     小明 今年18岁 性别男 有男朋友 男朋友会说话 说什么自己定
     */

    function status(name, age, friend) {
        this.name = name;
        this.age = age;
        this.friend = friend;
        this.speeck = function () {
            console.log("我是" + this.name + "今年" + this.age + "岁,我的朋友是" + this.friend + "性")
        }
    }
    var somm = new status("小明", 18, "男")
    somm.speeck()

    //工厂模式
    //造一辆车 出厂 （合格证/建议零售价/说明书）
    function Car(name, price, money, speeck) {
        var obj = {}
        obj.name = name;
        obj.price = price;
        obj.money = money;
        obj.speeck = speeck
        return "汽车名：" + obj.name + "汽车铲平" + obj.price + "售价" + obj.money + "我们的汽车优点:" + obj.speecl;
    }
    var carone = Car("帕拉梅拉", "已经合格", "120000￥", "快准狠")
    console.log(carone)

    var ddd = document.getElementById('div1');
    var jcc = ddd.getElementsByTagName('input');
    var sss = ddd.getElementsByTagName('div');
    var i = 0;

    for (i = 0; i < jcc.length; i++) {
        jcc[i].index = i;
        jcc[i].onclick = function () {
            for (i = 0; i < jcc.length; i++) {
                jcc[i].className = '';
                sss[i].style.display = 'none';
            }
            this.className = 'active';
            sss[this.index].style.display = 'block';
        };
    }

</script>
</body>
</html>
